<template>
    <!-- <div class="pe-notification" @click.stop="onClick"> -->
        <div class="pe-notification-icon">
            <template v-if="type">
                <Success v-if="type === 'success'" style="color: var(--pe-color-success);" />
                <Info v-if="type === 'info'" style="color: var(--pe-color-info);" />
                <Warning v-if="type === 'warning'" style="color: var(--pe-color-warning);" />
                <Error v-if="type === 'error'" style="color: var(--pe-color-error);" />
            </template>
            <template v-else>
                <template v-if="typeof icon === 'string'">{{ icon }}</template>
                <template v-else>
                    <icon />
                </template>
            </template>
        </div>
        <div style="width: 100%;">
            <h2 class="pe-notification-title">
                {{ title }}
                <div v-if="showClose" class="pe-notification-close" @click.stop="onClose">
                    <Close />
                </div>
            </h2>
            <div class="pe-notification-content">
                <span v-if="!dangerouslyUseHTMLString">
                    <template v-if="typeof message === 'string'">
                        {{ message }}
                    </template>
                    <message v-else />
                </span>
                <div v-else v-html="message"></div>
            </div>
        </div>
    <!-- </div> -->
</template>

<script setup lang="ts">
import { Component, VNode } from "vue"
import Close from "../../icons/close.vue";
import Success from "../../icons/success.vue";
import Info from "../../icons/info.vue";
import Warning from "../../icons/warning.vue";
import Error from "../../icons/error.vue";

/**
 * @param title 标题
 * @param message 通知栏正文内容
 * @param dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理
 * @param type 通知的类型
 * @param icon 自定义图标。 若设置了 type，则 icon 会被覆盖
 * @param showClose 是否显示关闭按钮
 * @param onClose 关闭时的回调函数
 */
interface Props {
    title?: string,
    message?: string | VNode,
    dangerouslyUseHTMLString?: boolean,
    type?: 'success' | 'warning' | 'info' | 'error' | '',
    icon?: string | Component,
    showClose?: boolean,
    onClose?: () => void
}

withDefaults(defineProps<Props>(), {
    dangerouslyUseHTMLString: false,
    type: '',
    showClose: true,
    onClose: () => { }
})
</script>